<template>
  <div>
    <div class="container">
      <div style="height:36px;"></div>
      <div style="padding:10px;box-sizing: border-box;">
        <header>
          <t-button @click="back" variant="outline">
            <template #icon><ArrowLeftIcon /></template>
            返回
          </t-button>
        </header>
      </div>
      <div style="padding:10px;">
        <t-tabs  theme="normal" defaultValue="first">
          <t-tab-panel value="first" >
            <template #label> <t-icon name="data-display" class="tabs-icon-margin" /> 参数 </template>
            <t-card>
              <t-form v-model="formState">
                <t-form-item label="文件路径" name="doc_path">
                  <t-input v-model:value="formState.doc_path"></t-input>
                </t-form-item>
                <t-form-item label="网页路径" name="html_path">
                  <t-input v-model:value="formState.html_path"></t-input>
                </t-form-item>
                <t-form-item>
                  <t-button @click="submit">提交</t-button>
                </t-form-item>
              </t-form>
            </t-card>

          </t-tab-panel>
          <t-tab-panel value="second">
            <template #label> <t-icon name="save" class="tabs-icon-margin" /> 历史 </template>
            <p style="padding: 10px">
              <t-space style="margin-bottom: 8px;">
                <t-button theme="warning" @click="delRecord">删除</t-button>
              </t-space>
              <t-table
                  row-key="ID"
                  :data="recordData"
                  :columns="columns"
                  v-model:selected-row-keys="rowKeys"
                  size="small"
                  :stripe="true"
                  :bordered="true"
                  table-layout="fixed"
                  :pagination="{
                      defaultCurrent: 1,
                      defaultPageSize: 10,
                      total,
                    }"
                  :show-header="true"
                  resizable
                  lazy-load
                  @select-change="rehandleSelectChange"
              >
                <template #time="{ col, row }">
                  <span v-format="row[col.colKey]"></span>
                </template>
              </t-table>
            </p>
          </t-tab-panel>
          <t-tab-panel value="third">
            <template #label> <t-icon name="logo-adobe-illustrate-filled" class="tabs-icon-margin" /> AI </template>
            <p style="padding: 10px">
              <t-form v-model="aiState">
                <t-form-item label="APIKEY" name="api_key">
                  <t-input v-model:value="aiState.api_key"></t-input>
                </t-form-item>
                <t-form-item>
                  <t-button @click="aisubmit">提交</t-button>
                </t-form-item>
              </t-form>
            </p>
          </t-tab-panel>
        </t-tabs>
      </div>
    </div>
  </div>
</template>

<script setup>
import router from "../router/index.js";
import {ref} from "vue";
import {
  ArrowLeftIcon,
} from 'tdesign-icons-vue-next';
import { MessagePlugin } from 'tdesign-vue-next';

import {DeleteRecords, RecordList, SetSystemParam, ShowSystemParam,ShowApiKey,UpdateApiKey} from "../../wailsjs/go/main/App.js";


const formState = ref({
  doc_path:"",
  html_path:"",
})

const showCfg = async()=>{
  formState.value = await ShowSystemParam()
}
const submit = async ()=>{
  await SetSystemParam(formState.value)
  MessagePlugin.success("修改成功");
}
showCfg();
const back = ()=>{
  router.go(-1);
}

const columns=[
  { colKey: 'row-select',  type: 'multiple', width: '60' },
  { colKey: 'ID', title: '序号', width: '80' },
  { colKey: 'url', title: '路径' },
  { colKey: 'batch_no', title: '批次',width: '160' },
  { colKey: 'CreatedAt', title: '时间', width: '180',cell:'time' },
]
const recordData = ref([])
const total = ref(0)
const rowKeys=ref([])
const loadData = async ()=>{
  recordData.value = await RecordList()
  total.value = recordData.value.length
  aiState.value = await ShowApiKey()
  console.log(aiState.value)
}
loadData();
const rehandleSelectChange = (value, ctx) => {
  rowKeys.value = value;
};

const delRecord=async()=>{
  await DeleteRecords(rowKeys.value)
  MessagePlugin.success("删除成功");
  await loadData();
}
//ai
const aiState=ref({
  ID:null,
  api_key:""
})
const aisubmit= async () =>{
  await UpdateApiKey(aiState.value)
  MessagePlugin.success("保存成功");
}
</script>

<style scoped>
.container{
  background-image: linear-gradient(25deg, #3927a2, #7d56a7, #b088aa, #dfbdab);
  min-height:768px;
}
</style>